<template>
  <view class="contianer">
    <view class="swiper-box">
        <swiper class="swiper" circular @change="change" >
            <swiper-item v-for="(item,index) in props.swiperList" :key="index">
                <view class="swiper-item uni-bg-red">
                    <image :src="item" class="swiper-img" />
                </view>
            </swiper-item>
        </swiper>
        <view class="dot">
			<view v-for="(item, index) in props.swiperList.length" :key="'s'+index" :class="['dot_item', current === index ? 'active' : '']" ></view>
            <span style="display: none;">{{ props.update }}</span>
		</view>
    </view>
    <view class="content">
        <view class="read">
            <image src="/static/english/english_read_bg.png" class="read-img"/>
            <view class="read-content">
                <view class="upper flex-row">
					<view class="left flex-column">
						<view class="flex-row" style="color: #0AC15D; font-weight: 500;font-size: 32rpx;">
							<view>课本点读</view>
							<view class="dimension">正版</view>
						</view>
						<span style="font-weight: 400;font-size: 24rpx; color: #0AC15D; margin-top: 8rpx;">小学同步点读书</span>
					</view>
					<button class="right" open-type="share">
						分享到班级群
                    </button>
				</view>
                <div class="below">
					<div class="book_image">
						<image :src="props.book.cover" class="book_image"/>
					</div>
					<div class="introduce">
						<span style="width:328rpx">{{ props.book.title }}</span>
						<span style="font-weight: 400;font-size: 24rpx;margin-top: 12rpx;">{{ props.description }}</span>
                        <div class="button">
                            <div class="change" @click="navTO">更换课本</div>
                            <div class="speak" @click="handleRead">开始点读</div>
                        </div>
					</div>
				</div>
            </view>
        </view>
        <view class="tab">
            <view :class="['item', activeTab === item.id ? 'active_tab' : '' ]" v-for="item in tab" :key="item.id" @click="handleTab(item.id)">
                {{ item.title }}
            </view>
        </view>
        <view class="booklist">
            <view class="b_item" v-for="item in booklist" :key="item.id" @click="handleBook(item.id)">
                <span style="width: 390rpx;margin-top: 28rpx;">{{ item.title }}</span>
                <view class="preview">
                    <view style="display: flex; align-items: center;">
                        <span >查看</span>
                        <image src="/static/english/arrow.png" class="preview-img"/>
                    </view>
                </view>
                <image :src="item.cover" class="book_image"/>
            </view>
        </view>
    </view>
  </view>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import { hasLogin } from '@/utils/tools';
    import { getBannerApi, getYunDuoBookListApi, getMySelfApi } from '@/apis/index';
    const swiperList = ref([]);
    const current = ref(0); 
    const change = (e)=>{
        current.value = e.detail.current;
    }
    // const data = reactive({
    //     book:{
    //         booksId: 1335041,
    //         cover: '/static/english/default-book-1.jpg',
    //         id: 1335041,
    //         title: '人教-英语-新起点-一年级上册',
    //         description: '一年级上册'
    //     }
    // })
    const tab = ref([
        {id: 1, title: 'PEP'},
        {id: 2, title: '新起点'},
        {id: 3, title: '精通版'}
    ])
    const booklist = ref([
        {id: 0, title: '人教-英语-新起点-一年级上册', cover: '/static/english/default-book-1.jpg'},
        {id: 1, title: '人教-英语-新起点-一年级上册', cover: '/static/english/default-book-1.jpg'},
        {id: 2, title: '人教-英语-新起点-一年级上册', cover: '/static/english/default-book-1.jpg'}
    ])
    const props = defineProps({
		book:{
            type: Object,
            default: () => ({})
        },
		swiperList:{
			type: Array,
			default: []
		}
    })

    const activeTab = ref(1);
    onMounted(()=>{
        getBanner();
		getBookList(activeTab.value);
		// getMySelfBook();
    })
    const getMySelfBook = async() =>{
		const { obj } = await getMySelfApi({course: 'english'})
		if (obj.length){
			data.book = obj[0]
		}
	}
    const getBanner = async() => {
		const {obj} = await getBannerApi({flag: 2})
		const newValue = [obj.banner3, obj.banner4].filter((item, index) => typeof item !== 'number' && item !== null)
		swiperList.value = newValue;
	}
    const handleTab = (e)=>{
        activeTab.value = e;
        getBookList(e)
    }
    const handleRead =() =>{
        const token = uni.getStorageSync('token');
        if(token){
            uni.navigateTo({
                url: `/pages/web-view/index?data=${encodeURIComponent(JSON.stringify({id:props.book.booksId}))}`
            })
        } else {
            uni.navigateTo({
                url: '/pages/login/index'
            })  
        }
    }
    const getBookList = async(id) =>{
		const res = await getYunDuoBookListApi({flag: id})
		booklist.value = res.obj;
	}
    const navTO = ()=>{
		if(hasLogin()){
			uni.navigateTo({
				url: `/pages/select/index?data=${encodeURIComponent(JSON.stringify({course: 'english'}))}`
			})
		} else {
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}
	}
	const handleBook = (e)=>{
		if(hasLogin()){
			uni.navigateTo({
				url: `/pages/web-view/index?data=${encodeURIComponent(JSON.stringify({id:e}))}`
			})
		}else{
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}
	}
</script>

<style lang="scss">
	.contianer{
		width:100vw;
        height: 100vh;
        .swiper-box{
            position: relative;
            .swiper{
                width:100vw;
                height: 560rpx;
                .swiper-item{
                    width:100vw;
                    height: 560rpx;
                    .swiper-img{
                        width:100vw;
                        height: 560rpx;
                    }
                }
            }
            .dot{
                position: absolute;
                width: 100%;
                bottom: 88rpx;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                :not(:first-child){
                    margin-left: 8rpx;
                }
                .dot_item{
                    width: 38rpx;
                    height: 6rpx;
                    background: #FFFFFF;
                    border-radius: 4rpx 4rpx 4rpx 4rpx;
                    opacity: 0.2;
                }
                .active{
                    opacity: unset;
                }
            }
        }
        .content{
            padding-top: 30rpx;
            border-top-right-radius: 40rpx;
            background: #F9FAFE;
            position: relative;
            top: -60rpx;
            display: flex;
            flex-direction: column;
            .read{
                display: flex;
                width: 100%;
                .read-img{
                   width: 708rpx;
                   height: 456rpx;
                   margin-left: 12rpx;
                }
                .read-content{
                    position: absolute;
                    width: calc(100% - 70rpx);
                    height: 456rpx;
                    padding-top: 40rpx;
                    padding-left: 70rpx;
                    z-index: 99;
                    .upper{
                        display: flex;
                        flex-direction: row;
                        .left{
                            width: auto;
                            height: auto;
                        }
                        .dimension{
                            width: 88rpx;
                            height: 44rpx;
                            background: rgba(78,197,132,0.2);
                            border-radius: 12rpx 12rpx 12rpx 12rpx;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #4EC584;
                            margin-left: 24rpx;
                        }
                        .right{
                            width: 184rpx;
                            height: 60rpx;
                            border-radius: 38rpx 38rpx 38rpx 38rpx;
                            border: 2rpx solid #4EC584;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #4EC584;
                            margin-left: 188rpx;
                            padding-left: unset;
                            padding-right: unset;
                            line-height: unset;
                            background-color: unset;
                            margin-right: unset;
                            box-sizing: unset;
                        }
                    }
                    .below{
                        margin-top: 26rpx;
                        margin-left: 6rpx;
                        display: flex;
                        flex-direction: row;
                        .book_image{
                            width: 192rpx;
                            height: 256rpx;
                            box-shadow: -10rpx 4rpx 8rpx 0rpx rgba(0,75,128,0.2);
                            border-radius: 20rpx;
                            border: 2rpx solid #FFFFFF;
                        }
                        .introduce{
                            margin-left: 34rpx;
                            margin-top: 44rpx;
                            width: 388rpx;
                            font-weight: 500;
                            font-size: 28rpx;
                            color: #FFFFFF;
                            display: flex;
                            flex-direction: column;
                            .speak{
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 172rpx;
                                height: 68rpx;
                                background: linear-gradient( 180deg, #F1CA2E 0%, #EBAC19 100%);
                                box-shadow: 0rpx 8rpx 20rpx 0rpx #2EAD68;
                                border-radius: 40rpx 40rpx 40rpx 40rpx;
                                border: 2rpx solid #FFD649;
                                font-weight: 400;
                                font-size: 28rpx;
                                color: #FFFFFF;
                            }
                            .change{
                                width: 172rpx;
                                height: 68rpx;
                                border-radius: 40rpx 40rpx 40rpx 40rpx;
                                border: 2rpx solid #FFFFFF;
                                font-weight: 400;
                                font-size: 28rpx;
                                color: #FFFFFF;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin-right: 14rpx;
                            }
                            .button{
                                padding-left: 30rpx;
                                display: flex;
                                flex-direction: row;
                                margin-top: 28rpx;
                            }
                        }
                    }
                }
            }
            .tab{
                display: flex;
                flex-direction:row;
                padding-left: 30rpx;
                margin-top: 54rpx;
                :not(:first-child){
                    margin-left: 20rpx;
                }
                .item{
                    width: 170rpx;
                    height: 68rpx;
                    background: #FFFFFF;
                    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.1);
                    border-radius: 40rpx 40rpx 40rpx 40rpx;
                    font-weight: 400;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 28rpx;
                    color: #333333;
                }
                .active_tab{
                    background: #4EC584;
                    color: #FFFFFF;
                }
            }
            .booklist{
                margin-top: 20rpx;
                display: flex;
                flex-direction: column;
                padding-left: 28rpx;
                padding-right: 32rpx;
                padding-bottom: 198rpx;
                .b_item{
                    width: calc(100% - 64rpx);
                    height: 206rpx;
                    background: #FFFFFF;
                    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.1);
                    border-radius: 60rpx;
                    margin-top: 54rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    flex-direction: column;
                    padding-right: 64rpx;
                    position: relative;
                    .preview{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #4EC584;
                        width: 390rpx;
                        margin-bottom: 34rpx;
                        .preview-img{
                            width: 24rpx;
                            height: 24rpx;
                            margin-left: 8rpx;
                        }
                    }
                    .book_image{
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 180rpx;
                        height: 240rpx;
                        border-radius: 20rpx;
                        border: 2rpx solid #FFFFFF;
                    }
                }
            }
        }
	}
</style>